<template>
    <div>
       <view-box ref="viewBox">
          <tab slot="header" style="width:100%;position:fixed;left:0;top:45px;z-index:100;">
            <tab-item :selected="isselect1" @on-item-click="onItemClick(1)" name="demo">待审核</tab-item>
            <tab-item :selected="isselect2" @on-item-click="onItemClick(2)"  name="demo">通过</tab-item>
            <tab-item :selected="isselect3" @on-item-click="onItemClick(3)" name="demo">驳回</tab-item>
        </tab> 
      </view-box>
      
    <p v-if='b'  style="text-align:center;margin-bottom:60px;margin-top:45px;" >
      <i style="font-size:10em;color:#aaa;" class="iconfont icon-kongshuju"></i>
    </p>
      <lab v-else style="padding-top:35px;" :list="list"></lab>
    <div v-show="!b" class="loadmore">
      <p @click.stop="loadmore" class="more"><span v-if="!isLoad">更多...</span></p> 
    </div> 
    <divider style="margin-bottom: 90px;" v-if="isLoad">我是有底线的</divider>
    </div>
</template>

<script>
import {Group, Cell, Divider, Tab, TabItem, FormPreview, XButton, ViewBox} from 'vux'
import lab from './lab'
export default {
  components: {
    Group,
    Cell,
    Tab,
    lab,
    TabItem,
    ViewBox,
    FormPreview,
    Divider,
    XButton
  },
  data () {
    return {
      status: 1,
      list: [],
      b: false,
      isMore: true,
      isLoad: false,
      current: 1
    }
  },
  computed: {
    isselect1 () {
      return this.status === 1
    },
    isselect2 () {
      return this.status === 2
    },
    isselect3 () {
      return this.status === 3
    },
    b () {
      return this.list.length === 0
    }
  },
  created () {
    this.$http.get('/api/items/labApply?status=' + 1).then((res) => {
      if (res.data.content.records.length > 0) {
        this.show1 = false
        this.list = res.data.content.records
        console.log(res)
        this.isLoad = false
      } else {
        this.show1 = false
        this.isLoad = false
      }
    })
  },
  methods: {
    loadmore () {
      this.current++
      var val = this.status
      this.isMore = true
      this.isLoad = true
      this.$http.get('/api/items/labApply?status=' + val + '&current=' + this.current).then((res) => {
        if (res.data.content.records.length > 0) {
          console.log(res.data.content.records.length > 0, '0000000000000')
          this.show1 = false
          res.data.content.records.map((item) => {
            this.list.push(item)
          })
          this.isMore = false
          this.isLoad = false
        } else {
          this.show1 = false
          this.isLoad = true
        }
      })
      setTimeout(() => {
        this.show1 = false
      }, 5 * 1000)
    },
    onItemClick (val) {
      this.status = val
      this.isMore = true
      this.isLoad = true
      this.list = []
      this.$http.get('/api/items/labApply?status=' + val).then((res) => {
        if (res.data.content.records.length > 0) {
          this.show1 = false
          res.data.content.records.map((item) => {
            this.list.push(item)
          })
          this.isMore = false
          this.isLoad = false
        } else {
          this.show1 = false
          this.isLoad = false
        }
      })
    }
  }
}
</script>

<style>
    body{
        background-color: #eee;
    }
    
.loadmore{
  background: #fff;
  float: left;
  margin-bottom: 90px;
  width: 100%;
  border-top: 1px solid #eee;
}
.more{
  line-height: 2.5em;
  font-size: 14px;
  padding: 0 10px;
}
</style>
